<template>
  <el-dialog
    :title="title"
    :visible.sync="visibleSync"
    :width="width"
    :fullscreen="fullscreen"
    :top="top"
    :modal="modal"
    :append-to-body="true"
    :lock-scroll="lockScroll"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :show-close="showClose"
    :before-close="handleBeforeClose"
    :center="center"
    :custom-class="customClass"
    @open="handleOpen"
    @close="handleClose">
    
    <!-- 对话框内容 -->
    <div class="dialog-content">
      <slot></slot>
    </div>
    
    <!-- 对话框底部按钮 -->
    <div slot="footer" class="dialog-footer" v-if="showFooter">
      <slot name="footer">
        <button-box 
          :text="cancelText" 
          :size="buttonSize" 
          @click="handleCancel">
        </button-box>
        <button-box 
          type="primary" 
          :text="confirmText" 
          :size="buttonSize" 
          :loading="confirmLoading"
          @click="handleConfirm">
        </button-box>
      </slot>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'DialogBox',
  props: {
    // 对话框标题
    title: {
      type: String,
      default: '提示'
    },
    // 是否可见
    visible: {
      type: Boolean,
      default: false
    },
    // 对话框宽度
    width: {
      type: String,
      default: '50%'
    },
    // 是否全屏
    fullscreen: {
      type: Boolean,
      default: false
    },
    // 距离顶部距离
    top: {
      type: String,
      default: '15vh'
    },
    // 是否显示遮罩层
    modal: {
      type: Boolean,
      default: true
    },
    // 是否插入到body元素上
    appendToBody: {
      type: Boolean,
      default: true // 默认设为true，确保对话框挂载到body上，避免z-index问题
    },
    // 是否锁定滚动
    lockScroll: {
      type: Boolean,
      default: true
    },
    // 是否可以通过点击遮罩关闭
    closeOnClickModal: {
      type: Boolean,
      default: true
    },
    // 是否可以通过按下ESC关闭
    closeOnPressEscape: {
      type: Boolean,
      default: true
    },
    // 是否显示关闭按钮
    showClose: {
      type: Boolean,
      default: true
    },
    // 是否居中显示
    center: {
      type: Boolean,
      default: false
    },
    // 自定义类名
    customClass: {
      type: String,
      default: ''
    },
    // 是否显示底部按钮
    showFooter: {
      type: Boolean,
      default: true
    },
    // 取消按钮文本
    cancelText: {
      type: String,
      default: '取消'
    },
    // 确认按钮文本
    confirmText: {
      type: String,
      default: '确定'
    },
    // 确认按钮是否加载中
    confirmLoading: {
      type: Boolean,
      default: false
    },
    // 按钮大小
    buttonSize: {
      type: String,
      default: 'medium',
      validator: value => ['large', 'medium', 'small', 'mini'].includes(value)
    }
  },
  computed: {
    // 使用计算属性直接绑定visible，避免中间状态
    visibleSync: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit('update:visible', val);
      }
    }
  },
  methods: {
    // 处理打开事件
    handleOpen() {
      this.$emit('open');
    },

    // 处理关闭事件
    handleClose() {
      this.$emit('close');
      this.visibleSync = false;
    },

    // 关闭前回调
    handleBeforeClose(done) {
      this.$emit('before-close', done);
      // 直接关闭对话框
      this.visibleSync = false;
      done();
    },

    // 处理取消
    handleCancel() {
      this.$emit('cancel');
      this.visibleSync = false;
    },

    // 处理确认
    async handleConfirm() {
      try {
        this.$emit('confirm');
        // 如果没有阻止关闭，则关闭对话框
        if (!this.confirmLoading) {
          this.visibleSync = false;
        }
      } catch (error) {
        console.error('确认操作失败:', error);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-content {
  min-height: 100px;
}

.dialog-footer {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 确保遮罩层样式正确 */
::v-deep .el-dialog__wrapper {
  overflow: hidden;
}

::v-deep .el-dialog {
  margin-top: 15vh !important;
  margin-bottom: 0;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

::v-deep .el-dialog__body {
  overflow-y: auto;
  color: #606266;
  font-size: 14px;
  padding: 20px;
}

/* 确保对话框不被遮罩层覆盖 */
::v-deep .el-dialog__headerbtn {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2100;
}
</style> 